<template>
	<view>
		<view class="content">
			<view class="">
				<view class="" style="padding-top: 100upx;font-size: 34upx;text-align: center;padding-bottom: 40upx;">
					绑定手机号码
				</view>
				<view class="" style="padding-bottom: 40upx;text-align: center;color:#aaa;font-size: 30upx;">
					完成苹果绑定，享受便捷服务
				</view>
			</view>
			<!-- 短信验证码登录 -->
			<bjx-form class="form2" :rules="rules2" :form="formData" ref="form2">
				<view class="mobile-login">
					<bjx-form-item class="mobile-login-mobile" label-type="inline" prop="mobile" label="手机号码">
						<view slot="label">
							<image class="mobile-login-mobile-img" src="@/static/images/shoujihao.png"></image>
						</view>
						<input class="mobile-login-mobile-content" type="text" value="" placeholder="请输入手机号码"
							v-model="formData.mobile" name="mobile" />
					</bjx-form-item>

					<bjx-form-item class="mobile-login-code" label-type="inline" prop="code" label="短信验证码"
						style="width:96%;">
						<view slot="label">
							<image class="mobile-login-code-img" src="@/static/images/yanzhengma.png" mode=""></image>
						</view>
						<view class="get-mobile-code">
							<input class="mobile-login-code-content" type="text" value="" placeholder="短信验证码"
								v-model="formData.code" name="code" />
							<text class="mobile-login-code-btn" @tap="getCode">{{codeTip}}</text>
						</view>
					</bjx-form-item>

				</view>

				<view class="login">
					<view class="login-content" @tap="bind" :style="{backgroundColor:mainColor}">
						绑 定
					</view>
				</view>
			</bjx-form>

		</view>

		<view class="agree-files">
			<image src="/static/images/remind.png" mode=""
				style="width:207upx;height:56upx;position: absolute;top:20upx" v-if="isShowRemind">
			</image>
			<view class="agree-files-content">
				<view class="remember" @tap="agree">
					<checkbox-group>
						<label>
							<checkbox value="cb" :checked="checked" class="remember-input"
								:class="'animation-' + animation" />我已阅读并同意
						</label>
					</checkbox-group>
				</view>
				<navigator class="forget" url="/pages6/pages/docs/service-contract">
					《服务协议》
				</navigator>
				<navigator class="forget" url="/pages6/pages/docs/privacy-policy">
					《隐私保护政策》
				</navigator>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				cate: 1,
				animation: '',
				isShowRemind: false,
				isDisplayBack: true,
				active1: true,
				active2: false,
				perActive: true,
				comActive: false,
				srcp: '/static/images/gerenban2.png',
				srcc: '/static/images/qiyeban1.png',
				codeTip: '获取验证码',
				numShow: false,
				second: 60,
				checked: false,
				checked1: true,
				// checked2: true,
				showOtherLogin: true,
				// passwordType: 'password',
				mainColor: '#f3431a',

				isDisplay: false,
				passwordFontSize: '32rpx',
				placeholder: '',
				isFirst: true,

				noClick: true,

				formData: {
					mobile: '',
					code: ''
				},
				rules2: {
					mobile: {
						required: true,
						rule: 'length:11',
						message: {
							reg: '请填写正确格式的手机号码'
						}
					},
					code: {
						required: true,
						rule: 'type:string',
						message: {
							type: '短信验证码不能为空'
						}
					}
				},
				openId: ""
			}
		},

		onLoad(option) {
			// #ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform != 'ios') {
				this.$api.msg('非苹果系统，不可绑定！')
				// this.goApp()
			}

			this.openId = option.openId

			// #endif

			// #ifndef APP-PLUS
			this.$api.msg('非苹果系统，不可绑定！')
			// this.goApp()

			// #endif

		},

		methods: {
			...mapMutations(['login']),

			goApp() {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login?cate=' + this.cate
					})
				}, 1000)
			},

			//登录方式
			async memberLogin(id) {
				this.type = id;
				switch (id) {
					case 1:

						this.active1 = true;
						this.active2 = false;
						break;
					case 2:

						this.active1 = false;
						this.active2 = true;
						break;
				}

			},

			async getCode() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					this.$api.msg("请稍后再试")
					return false;
				}
				if (this.numShow == true) {
					this.$api.msg(this.second + 's之内不可再次发送');
					return false;
				}
				if (!this.formData.mobile) {
					this.$api.msg('请输入手机号码');
					return false;
				}

				let res = await this.$myRequest({
					url: '/getCode/' + this.formData.mobile
				})

				this.$api.msg(res.data.msg, 'success')
				this.codeTip = '60s'
				this.numShow = true
				var interval = setInterval(() => {
					--this.second;
					this.codeTip = this.second + 's'
					if (this.second <= 0) {
						clearInterval(interval);
						this.codeTip = '获取验证码';
						this.numShow = false;
						this.second = 60
					}
				}, 1000)

			},
			//记住登录信息
			async rememberInfo1() {
				if (this.checked1 === true) {
					this.checked1 = false
				} else {
					this.checked1 = true;
				}
				// console.log(this.checked1)
				if (this.checked1 === true) {
					uni.setStorageSync('username', this.formData.username);
					uni.setStorageSync('password', this.formData.password);
				} else {
					uni.setStorageSync('username', '');
					uni.setStorageSync('password', '');
				}
			},

			async agree() {
				if (this.checked === true) {
					this.checked = false
				} else {
					this.checked = true;
					this.isShowRemind = false;
				}
			},

			// 触发提交表单
			bind() {
				if (this.checked1 === true) {
					uni.setStorageSync('mobile', this.formData.mobile);
				}
				this.$refs.form2.validate(val => {
					if (val == true) {
						let dataObj = {
							cate: this.cate,
							type: 2,
							mobile: this.formData.mobile,
							code: this.formData.code
						};

						// if (!this.openId) {
						// 	this.$api.msg('缺少关键参数！');
						// 	return false;
						// }
						dataObj.openId = this.openId
						this.submit(dataObj);
					}
				})
			},

			//登录提交
			async submit(dataObj) {

				if (this.checked === false) {
					this.$api.msg('请先同意用户协议！')
					
					this.isShowRemind = true;
					this.animation = 'shake';
					setTimeout(() => {
						this.animation = ''
					}, 2000);
					return false;
				}

				let res = await this.$myRequest({
					url: '/login',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					this.$api.msg('绑定成功', 'success', 1000);
					let token = res.data.token;
					this.loginAfter(token);
				} else {
					this.$api.msg(res.data.msg);
				}
			},

			async loginAfter(token) {
				uni.setStorageSync('token', token);
				uni.setStorageSync('cate', this.cate);

				let url = '/getUserInfo';
				if (this.cate == 2) {
					url = '/getComInfo';
				}
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: this.cate,
						token: token
					},
					methods: 'post'
				})

				this.login(res.data.data);

				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}, 1000)
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
		font-size: $font-lg;
	}
</style>
<style lang="scss" scoped>
	.head-img {
		height: 248rpx;
		width: 100%;
	}

	.backIndex {
		z-index: 99;
		position: fixed;
		// #ifdef H5
		top: 50upx;
		// #endif
		// #ifdef APP-PLUS
		top: 120upx;
		// #endif
		// #ifdef MP-WEIXIN
		top: 86upx;
		// #endif
		left: 42upx;
		font-size: 30upx;
		display: flex;
		align-items: center;
	}

	.title {
		// #ifdef APP-PLUS
		padding: 226rpx 42rpx 70rpx;
		// #endif
		// #ifdef H5
		padding: 110rpx 42rpx 70rpx;
		// #endif
		// #ifdef MP-WEIXIN
		padding: 170rpx 42rpx 70rpx;
		// #endif
		display: flex;
		justify-content: space-between;

		.title-left,
		.title-right {
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 52rpx;
			/* font-weight: bold; */
		}

	}

	.content {
		height: auto;
		padding: 0 42rpx;

		.switch-login {
			height: 108rpx;
			width: 100%;
			background-color: #f7f7f7;
			letter-spacing: 3rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			.switch-user-login,
			.switch-mobile-login {
				height: 108rpx;
				display: inline-flex;
				// align-items: center;
				justify-content: center;

				// font-size: 36rpx;
				width: 50%;
				padding: 28rpx 0;
				color: #333;
			}
		}
	}

	.form2 {
		.mobile-login {
			height: 186rpx;
			background-color: #f7f7f7;
			border-radius: 20rpx;

			.mobile-login-mobile,
				{
				height: 92rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ebebeb;
				// background-color: #fff;

				.mobile-login-mobile-img {
					width: 38rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-right: 24rpx;
				}


				.mobile-login-mobile-content {
					display: inline-block;
					// font-size: 28rpx;
					color: #000;
				}

			}

			.mobile-login-code {
				height: 92rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				// border-bottom: 1px solid #f3f3f6;
				// background-color: #fff;
				width: 100%;
				position: relative;

				.mobile-login-code-img {
					width: 38rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-right: 24rpx;
				}

				.get-mobile-code {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;


					.mobile-login-code-content {
						width: 80%;
						display: inline-block;
						// font-size: 28rpx;
						color: #000;
					}

					.mobile-login-code-btn {
						position: absolute;
						right: 20rpx;
						background-color: #ee7f06;
						border-radius: 8rpx;
						color: #fff;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 20rpx;
					}
				}

			}
		}
	}

	.content-about {
		padding-top: 16rpx;
		height: 78rpx;
		line-height: 78rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		color: #666666;
		font-size: $font-base;

		.remember {
			display: inline-block;

			.remember-input {
				// font-size: $font-base;
				display: inline-block;
				transform: scale(0.6)
			}

		}

		.forget {
			color: #f3431a;
			// font-size: $font-base;
		}
	}

	.login {
		padding-top: 48rpx;

		.login-content {
			background-color: #f3431a;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			color: #fff;
			font-size: $font-base;
		}

		// letter-spacing: 19rpx;
		// font-size: 36rpx;
	}


	.register {
		padding-top: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #333;

		.go-register {
			color: #0083ff;
		}

	}

	.isdisplaymima {
		width: 38rpx;
		height: 30rpx;
		position: absolute;
		right: 100rpx;
		top: 32rpx;
	}

	.activeRed {
		color: #f3431a !important;
		border-bottom: 2px solid #f3431a;
	}

	.activeBlue {
		color: #f3431a !important;
		border-bottom: 2px solid #f3431a;
	}

	.bjx-form-item .label-inline .item-label {
		margin-right: 0px;
	}

	.bjx-form-item .label-inline {
		width: 100%;
	}

	.other-login {
		width: 100%;
		// // #ifdef APP-PLUS
		// position: absolute;
		// bottom: 120rpx;
		// padding: 0 54rpx;
		// // #endif
		// // #ifdef H5
		// padding: 60rpx 54rpx;
		// // #endif
		padding: 60rpx 54rpx 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #666666;

		.other-login-text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 32rpx;

			.other-login-text-title {
				margin: 0 36rpx;
				font-size: 28upx;
			}
		}
	}

	.agree-files {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 70upx 42upx 0;
		position: relative;
	}

	.agree-files-content {
		line-height: 42rpx;
		width: 100%;
		color: #666666;
		font-size: 24rpx;
		display: flex;
		align-items: center;

		.remember {
			display: inline-flex;

			.remember-input {
				display: inline-block;
				transform: scale(0.6)
			}

		}

		.forget {
			color: #f3431a;
			display: inline-block;
		}
	}

	.switch-login-text {
		font-size: $font-base;
	}

	.animation-shake {
		animation: shake 0.3s !important;
	}

	@keyframes shake {

		0%,
		100% {
			transform: translateX(0)
		}

		10% {
			transform: translateX(-9px)
		}

		20% {
			transform: translateX(8px)
		}

		30% {
			transform: translateX(-7px)
		}

		40% {
			transform: translateX(6px)
		}

		50% {
			transform: translateX(-5px)
		}

		60% {
			transform: translateX(4px)
		}

		70% {
			transform: translateX(-3px)
		}

		80% {
			transform: translateX(2px)
		}

		90% {
			transform: translateX(-1px)
		}
	}

	.apple_login {
		width: 260upx;
		height: 60upx;
		border-radius: 12upx;
		background: #000;
		display: flex;
		align-items: center;
		padding: 0 22upx;
		justify-content: space-between;
		margin-left: 30upx;
	}
</style>
